<script setup>
import {reactive} from "vue";
import {postRequest} from "@/util/api";
import {message} from "@/util/util";

const props = defineProps({
  initData: Function,
});

const data = reactive({
  visible: false,
  dirId: "",
  fileName: "",
});

function renameFile() {
  postRequest("/file-info/renameFile", null, {
    dirId: Number(data.dirId),
    newName: data.fileName.trim(),
  }, (res) => {
    message(res.data.msg, "success");
    props.initData();
    data.visible = false;
  });
}

function openFileRenameDialog(rename) {
  data.dirId = rename.dirId;
  data.fileName = rename.fileName;
  data.visible = true;
}

defineExpose({
  openFileRenameDialog,
});
</script>

<template>
  <el-dialog v-model="data.visible" title="重命名文件" width="300">
    <el-input v-model="data.fileName" placeholder="请输入文件名称"/>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="data.visible = false">取消</el-button>
        <el-button type="primary" @click="renameFile">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>

</style>